<template>
  <div class="student-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>课题浏览与申请</h1>
      <p>浏览企业发布的课题，选择感兴趣的进行申请</p>
    </div>

    <!-- 功能导航 -->
    <el-tabs v-model="activeTab" class="student-tabs">
      <el-tab-pane label="课题浏览" name="topics">
        <!-- 筛选条件 -->
        <div class="filter-section">
          <el-card class="filter-card">
            <div class="filter-row">
              <el-input
                v-model="filters.keyword"
                placeholder="输入关键词搜索课题"
                clearable
                style="width: 300px"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              
              <el-select
                v-model="filters.subject"
                placeholder="选择学科"
                clearable
                style="width: 200px"
              >
                <el-option label="计算机科学" value="computer_science" />
                <el-option label="电子信息" value="electronics" />
                <el-option label="机械工程" value="mechanical" />
                <el-option label="化学化工" value="chemistry" />
                <el-option label="生物医学" value="biomedical" />
                <el-option label="经济管理" value="economics" />
                <el-option label="其他" value="other" />
              </el-select>
              
              <el-select
                v-model="filters.enterprise"
                placeholder="选择企业"
                clearable
                style="width: 200px"
              >
                <el-option label="腾讯科技" value="tencent" />
                <el-option label="阿里巴巴" value="alibaba" />
                <el-option label="华为技术" value="huawei" />
                <el-option label="百度在线" value="baidu" />
                <el-option label="其他企业" value="other" />
              </el-select>
              
              <el-button type="primary" @click="handleSearch">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
              
              <el-button @click="resetFilters">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </div>
          </el-card>
        </div>

        <!-- 课题列表 -->
        <div class="topics-section">
          <el-row :gutter="20">
            <el-col 
              v-for="topic in filteredTopics" 
              :key="topic.id" 
              :xs="24" 
              :sm="12" 
              :md="8" 
              :lg="6"
            >
              <el-card class="topic-card" shadow="hover">
                <div class="topic-header">
                  <h3 class="topic-title">{{ topic.title }}</h3>
                  <el-tag :type="getStatusType(topic.status)" size="small">
                    {{ topic.statusText }}
                  </el-tag>
                </div>
                
                <div class="topic-content">
                  <p class="topic-description">{{ topic.description }}</p>
                  
                  <div class="topic-info">
                    <div class="info-item">
                      <el-icon><OfficeBuilding /></el-icon>
                      <span>{{ topic.enterprise }}</span>
                    </div>
                    <div class="info-item">
                      <el-icon><Collection /></el-icon>
                      <span>{{ topic.subject }}</span>
                    </div>
                    <div class="info-item">
                      <el-icon><Calendar /></el-icon>
                      <span>{{ topic.duration }}个月</span>
                    </div>
                    <div class="info-item">
                      <el-icon><Money /></el-icon>
                      <span>{{ topic.salary }}元/月</span>
                    </div>
                  </div>
                  
                  <div class="topic-requirements">
                    <h4>要求：</h4>
                    <ul>
                      <li v-for="req in topic.requirements" :key="req">{{ req }}</li>
                    </ul>
                  </div>
                </div>
                
                <div class="topic-actions">
                  <el-button 
                    type="primary" 
                    @click="showApplyDialog(topic)"
                    :disabled="topic.hasApplied"
                  >
                    {{ topic.hasApplied ? '已申请' : '申请课题' }}
                  </el-button>
                  
                  <el-button @click="showTopicDetail(topic)">
                    查看详情
                  </el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
          
          <!-- 分页 -->
          <div class="pagination-wrapper">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[12, 24, 36, 48]"
              :total="totalTopics"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="我的申请" name="applications">
        <div class="applications-section">
          <el-card class="applications-card">
            <template #header>
              <div class="card-header">
                <span>申请记录</span>
                <el-select v-model="applicationStatus" placeholder="筛选状态" style="width: 150px">
                  <el-option label="全部" value="" />
                  <el-option label="待审核" value="pending" />
                  <el-option label="已通过" value="approved" />
                  <el-option label="已拒绝" value="rejected" />
                </el-select>
              </div>
            </template>
            
            <el-table :data="filteredApplications" style="width: 100%">
              <el-table-column prop="topicTitle" label="课题名称" />
              <el-table-column prop="enterprise" label="企业名称" width="150" />
              <el-table-column prop="applyTime" label="申请时间" width="120" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="getApplicationStatusType(scope.row.status)">
                    {{ scope.row.statusText }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="feedback" label="反馈意见" />
              <el-table-column label="操作" width="120">
                <template #default="scope">
                  <el-button size="small" @click="viewApplicationDetail(scope.row)">
                    查看详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-tab-pane>

      <el-tab-pane label="我的项目" name="projects">
        <div class="projects-section">
          <el-card class="projects-card">
            <template #header>
              <div class="card-header">
                <span>参与的项目</span>
                <el-button type="primary" size="small" @click="showAddProjectDialog">
                  <el-icon><Plus /></el-icon>
                  添加项目
                </el-button>
              </div>
            </template>
            
            <el-row :gutter="20">
              <el-col 
                v-for="project in myProjects" 
                :key="project.id" 
                :xs="24" 
                :sm="12" 
                :md="8"
              >
                <el-card class="project-card" shadow="hover">
                  <div class="project-header">
                    <h3 class="project-title">{{ project.title }}</h3>
                    <el-tag :type="getProjectStatusType(project.status)" size="small">
                      {{ project.statusText }}
                    </el-tag>
                  </div>
                  
                  <div class="project-content">
                    <p class="project-description">{{ project.description }}</p>
                    
                    <div class="project-info">
                      <div class="info-item">
                        <el-icon><OfficeBuilding /></el-icon>
                        <span>{{ project.enterprise }}</span>
                      </div>
                      <div class="info-item">
                        <el-icon><User /></el-icon>
                        <span>导师：{{ project.mentor }}</span>
                      </div>
                      <div class="info-item">
                        <el-icon><Calendar /></el-icon>
                        <span>开始：{{ project.startDate }}</span>
                      </div>
                      <div class="info-item">
                        <el-icon><Timer /></el-icon>
                        <span>进度：{{ project.progress }}%</span>
                      </div>
                    </div>
                  </div>
                  
                  <div class="project-actions">
                    <el-button type="primary" @click="viewProjectDetail(project)">
                      查看详情
                    </el-button>
                    <el-button @click="viewProjectProgress(project)">
                      查看进度
                    </el-button>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-tab-pane>

      <el-tab-pane label="学习资源" name="resources">
        <div class="resources-section">
          <el-card class="resources-card">
            <template #header>
              <div class="card-header">
                <span>推荐学习资源</span>
                <el-input
                  v-model="resourceSearch"
                  placeholder="搜索资源"
                  style="width: 300px"
                  clearable
                >
                  <template #prefix>
                    <el-icon><Search /></el-icon>
                  </template>
                </el-input>
              </div>
            </template>
            
            <el-row :gutter="20">
              <el-col 
                v-for="resource in filteredResources" 
                :key="resource.id" 
                :xs="24" 
                :sm="12" 
                :md="8"
              >
                <el-card class="resource-card" shadow="hover">
                  <div class="resource-header">
                    <h3 class="resource-title">{{ resource.title }}</h3>
                    <el-tag :type="getResourceType(resource.type)" size="small">
                      {{ resource.typeText }}
                    </el-tag>
                  </div>
                  
                  <div class="resource-content">
                    <p class="resource-description">{{ resource.description }}</p>
                    
                    <div class="resource-meta">
                      <span class="resource-author">作者：{{ resource.author }}</span>
                      <span class="resource-date">{{ resource.date }}</span>
                    </div>
                  </div>
                  
                  <div class="resource-actions">
                    <el-button type="primary" @click="viewResource(resource)">
                      查看资源
                    </el-button>
                    <el-button @click="downloadResource(resource)">
                      下载
                    </el-button>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 申请课题对话框 -->
    <el-dialog
      v-model="applyDialogVisible"
      title="申请课题"
      width="600px"
      :before-close="handleCloseApplyDialog"
    >
      <el-form :model="applyForm" :rules="applyRules" ref="applyFormRef" label-width="100px">
        <el-form-item label="课题名称">
          <el-input :model-value="currentTopic?.title || ''" disabled />
        </el-form-item>
        
        <el-form-item label="企业名称">
          <el-input :model-value="currentTopic?.enterprise || ''" disabled />
        </el-form-item>
        
        <el-form-item label="研究计划" prop="researchPlan">
          <el-input
            v-model="applyForm.researchPlan"
            type="textarea"
            :rows="4"
            placeholder="请简要描述你的研究计划..."
          />
        </el-form-item>
        
        <el-form-item label="相关经验" prop="experience">
          <el-checkbox-group v-model="applyForm.experience">
            <el-checkbox label="项目开发经验">项目开发经验</el-checkbox>
            <el-checkbox label="学术研究经验">学术研究经验</el-checkbox>
            <el-checkbox label="团队协作经验">团队协作经验</el-checkbox>
            <el-checkbox label="相关技术栈">相关技术栈</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="技能标签" prop="skills">
          <el-select
            v-model="applyForm.skills"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择或输入技能标签"
            style="width: 100%"
          >
            <el-option label="Vue.js" value="vue" />
            <el-option label="React" value="react" />
            <el-option label="Python" value="python" />
            <el-option label="Java" value="java" />
            <el-option label="机器学习" value="ml" />
            <el-option label="数据分析" value="data" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="applyForm.contact" placeholder="请输入你的联系方式" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="applyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitApplication">提交申请</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 课题详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="课题详情"
      width="700px"
    >
      <div v-if="currentTopic" class="topic-detail">
        <h2>{{ currentTopic.title }}</h2>
        <p class="detail-description">{{ currentTopic.description }}</p>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="企业名称">{{ currentTopic.enterprise }}</el-descriptions-item>
          <el-descriptions-item label="学科领域">{{ currentTopic.subject }}</el-descriptions-item>
          <el-descriptions-item label="项目时长">{{ currentTopic.duration }}个月</el-descriptions-item>
          <el-descriptions-item label="月薪">{{ currentTopic.salary }}元</el-descriptions-item>
          <el-descriptions-item label="项目状态">{{ currentTopic.statusText }}</el-descriptions-item>
          <el-descriptions-item label="发布时间">{{ currentTopic.publishTime }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="detail-section">
          <h3>项目要求</h3>
          <ul>
            <li v-for="req in currentTopic.requirements" :key="req">{{ req }}</li>
          </ul>
        </div>
        
        <div class="detail-section">
          <h3>项目内容</h3>
          <p>{{ currentTopic.content }}</p>
        </div>
        
        <div class="detail-section">
          <h3>预期成果</h3>
          <p>{{ currentTopic.expectedOutcome }}</p>
        </div>
      </div>
    </el-dialog>

    <!-- 添加项目对话框 -->
    <el-dialog
      v-model="addProjectDialogVisible"
      title="添加项目"
      width="500px"
    >
      <el-form :model="projectForm" :rules="projectRules" ref="projectFormRef" label-width="100px">
        <el-form-item label="项目名称" prop="title">
          <el-input v-model="projectForm.title" placeholder="请输入项目名称" />
        </el-form-item>
        
        <el-form-item label="项目描述" prop="description">
          <el-input
            v-model="projectForm.description"
            type="textarea"
            :rows="3"
            placeholder="请描述项目内容..."
          />
        </el-form-item>
        
        <el-form-item label="企业名称" prop="enterprise">
          <el-input v-model="projectForm.enterprise" placeholder="请输入企业名称" />
        </el-form-item>
        
        <el-form-item label="导师姓名" prop="mentor">
          <el-input v-model="projectForm.mentor" placeholder="请输入导师姓名" />
        </el-form-item>
        
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker
            v-model="projectForm.startDate"
            type="date"
            placeholder="选择开始日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addProjectDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addProject">添加</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 项目详情对话框 -->
    <el-dialog
      v-model="projectDetailDialogVisible"
      title="项目详情"
      width="700px"
    >
      <div v-if="currentProject" class="project-detail">
        <h2>{{ currentProject.title }}</h2>
        <p class="detail-description">{{ currentProject.description }}</p>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="企业名称">{{ currentProject.enterprise }}</el-descriptions-item>
          <el-descriptions-item label="导师姓名">{{ currentProject.mentor }}</el-descriptions-item>
          <el-descriptions-item label="开始日期">{{ currentProject.startDate }}</el-descriptions-item>
          <el-descriptions-item label="项目进度">{{ currentProject.progress }}%</el-descriptions-item>
          <el-descriptions-item label="项目状态">{{ currentProject.statusText }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Search, 
  Refresh, 
  OfficeBuilding, 
  Collection, 
  Calendar, 
  Money,
  Plus,
  User,
  Timer
} from '@element-plus/icons-vue'

// 当前激活的标签页
const activeTab = ref('topics')

// 筛选条件
const filters = reactive({
  keyword: '',
  subject: '',
  enterprise: ''
})

// 申请状态筛选
const applicationStatus = ref('')

// 分页
const currentPage = ref(1)
const pageSize = ref(12)
const totalTopics = ref(0)

// 对话框状态
const applyDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const addProjectDialogVisible = ref(false)
const projectDetailDialogVisible = ref(false)
const currentTopic = ref<any>(null)
const currentProject = ref<any>(null)

// 申请表单
const applyForm = reactive({
  researchPlan: '',
  experience: [],
  skills: [],
  contact: ''
})

// 项目表单
const projectForm = reactive({
  title: '',
  description: '',
  enterprise: '',
  mentor: '',
  startDate: ''
})

// 资源搜索
const resourceSearch = ref('')

// 表单验证规则
const applyRules = {
  researchPlan: [
    { required: true, message: '请输入研究计划', trigger: 'blur' }
  ],
  experience: [
    { required: true, message: '请选择相关经验', trigger: 'change' }
  ],
  skills: [
    { required: true, message: '请选择技能标签', trigger: 'change' }
  ],
  contact: [
    { required: true, message: '请输入联系方式', trigger: 'blur' }
  ]
}

const projectRules = {
  title: [
    { required: true, message: '请输入项目名称', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入项目描述', trigger: 'blur' }
  ],
  enterprise: [
    { required: true, message: '请输入企业名称', trigger: 'blur' }
  ],
  mentor: [
    { required: true, message: '请输入导师姓名', trigger: 'blur' }
  ],
  startDate: [
    { required: true, message: '请选择开始日期', trigger: 'change' }
  ]
}

// 模拟课题数据
const topics = ref([
  {
    id: 1,
    title: '基于深度学习的图像识别系统开发',
    description: '开发一个基于深度学习的图像识别系统，能够识别和分类各种物体...',
    enterprise: '腾讯科技',
    subject: '计算机科学',
    duration: 6,
    salary: 8000,
    status: 'active',
    statusText: '招募中',
    requirements: ['熟悉Python', '了解深度学习框架', '有图像处理经验'],
    hasApplied: false,
    publishTime: '2024-01-15',
    content: '本项目旨在开发一个高性能的图像识别系统，使用最新的深度学习技术...',
    expectedOutcome: '完成一个可商用的图像识别系统，并撰写相关技术文档'
  },
  {
    id: 2,
    title: '企业级微服务架构设计与实现',
    description: '设计并实现一个企业级的微服务架构，支持高并发和大规模部署...',
    enterprise: '阿里巴巴',
    subject: '计算机科学',
    duration: 8,
    salary: 10000,
    status: 'active',
    statusText: '招募中',
    requirements: ['熟悉Java/Spring', '了解微服务架构', '有分布式系统经验'],
    hasApplied: false,
    publishTime: '2024-01-10',
    content: '本项目需要设计一个完整的微服务架构，包括服务注册、配置管理...',
    expectedOutcome: '完成微服务架构设计和核心功能实现，提供完整的部署方案'
  },
  {
    id: 3,
    title: '智能客服机器人开发',
    description: '开发一个基于自然语言处理的智能客服机器人，提升客户服务效率...',
    enterprise: '华为技术',
    subject: '人工智能',
    duration: 5,
    salary: 9000,
    status: 'active',
    statusText: '招募中',
    requirements: ['熟悉NLP技术', '了解机器学习', '有对话系统开发经验'],
    hasApplied: false,
    publishTime: '2024-01-08',
    content: '开发一个能够理解用户意图并提供准确回答的智能客服机器人...',
    expectedOutcome: '完成智能客服机器人的开发和测试，能够处理常见客户问题'
  }
])

// 模拟申请数据
const applications = ref([
  {
    id: 1,
    topicTitle: '基于深度学习的图像识别系统开发',
    enterprise: '腾讯科技',
    applyTime: '2024-01-16',
    status: 'approved',
    statusText: '已通过',
    feedback: '学生基础扎实，研究方向匹配，建议录用'
  },
  {
    id: 2,
    topicTitle: '企业级微服务架构设计与实现',
    enterprise: '阿里巴巴',
    applyTime: '2024-01-12',
    status: 'pending',
    statusText: '待审核',
    feedback: ''
  }
])

// 模拟我的项目数据
const myProjects = ref([
  {
    id: 1,
    title: '基于深度学习的图像识别系统开发',
    description: '开发一个基于深度学习的图像识别系统，能够识别和分类各种物体...',
    enterprise: '腾讯科技',
    mentor: '王教授',
    startDate: '2024-01-20',
    progress: 65,
    status: 'ongoing',
    statusText: '进行中'
  },
  {
    id: 2,
    title: '企业级微服务架构设计与实现',
    description: '设计并实现一个企业级的微服务架构，支持高并发和大规模部署...',
    enterprise: '阿里巴巴',
    mentor: '李教授',
    startDate: '2024-01-15',
    progress: 35,
    status: 'ongoing',
    statusText: '进行中'
  }
])

// 模拟学习资源数据
const resources = ref([
  {
    id: 1,
    title: '深度学习基础教程',
    description: '从零开始学习深度学习，包含基础理论和实践案例...',
    type: 'tutorial',
    typeText: '教程',
    author: '张教授',
    date: '2024-01-15'
  },
  {
    id: 2,
    title: '微服务架构设计指南',
    description: '详细介绍微服务架构的设计原则、最佳实践和案例分析...',
    type: 'guide',
    typeText: '指南',
    author: '李教授',
    date: '2024-01-10'
  },
  {
    id: 3,
    title: 'Python数据分析实战',
    description: '使用Python进行数据分析和可视化的实用教程...',
    type: 'course',
    typeText: '课程',
    author: '王教授',
    date: '2024-01-08'
  }
])

// 过滤后的课题列表
const filteredTopics = computed(() => {
  let result = topics.value
  
  if (filters.keyword) {
    result = result.filter(topic => 
      topic.title.includes(filters.keyword) || 
      topic.description.includes(filters.keyword)
    )
  }
  
  if (filters.subject) {
    result = result.filter(topic => topic.subject === filters.subject)
  }
  
  if (filters.enterprise) {
    result = result.filter(topic => topic.enterprise === filters.enterprise)
  }
  
  return result
})

// 过滤后的申请列表
const filteredApplications = computed(() => {
  if (!applicationStatus.value) {
    return applications.value
  }
  return applications.value.filter(app => app.status === applicationStatus.value)
})

// 过滤后的学习资源列表
const filteredResources = computed(() => {
  if (!resourceSearch.value) {
    return resources.value
  }
  return resources.value.filter(resource => 
    resource.title.includes(resourceSearch.value) || 
    resource.description.includes(resourceSearch.value)
  )
})

// 获取状态类型
const getStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    active: 'success',
    pending: 'warning',
    closed: 'info'
  }
  return typeMap[status] || 'info'
}

const getApplicationStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return typeMap[status] || 'info'
}

const getProjectStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    ongoing: 'primary',
    completed: 'success',
    pending: 'info',
    problem: 'danger'
  }
  return typeMap[status] || 'info'
}

const getResourceType = (type: string) => {
  const typeMap: Record<string, string> = {
    tutorial: 'success',
    guide: 'primary',
    course: 'warning',
    document: 'info'
  }
  return typeMap[type] || 'info'
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  // 这里可以调用API进行搜索
  ElMessage.success('搜索完成')
}

// 重置筛选条件
const resetFilters = () => {
  filters.keyword = ''
  filters.subject = ''
  filters.enterprise = ''
  currentPage.value = 1
}

// 显示申请对话框
const showApplyDialog = (topic: any) => {
  currentTopic.value = topic
  applyDialogVisible.value = true
  // 重置表单
  applyForm.researchPlan = ''
  applyForm.experience = []
  applyForm.skills = []
  applyForm.contact = ''
}

// 显示课题详情
const showTopicDetail = (topic: any) => {
  currentTopic.value = topic
  detailDialogVisible.value = true
}

// 关闭申请对话框
const handleCloseApplyDialog = () => {
  applyDialogVisible.value = false
}

// 提交申请
const submitApplication = async () => {
  try {
    // 这里应该调用API提交申请
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 更新课题状态
    if (currentTopic.value) {
      currentTopic.value.hasApplied = true
    }
    
    // 添加到申请列表
    const newApplication = {
      id: applications.value.length + 1,
      topicTitle: currentTopic.value.title,
      enterprise: currentTopic.value.enterprise,
      applyTime: new Date().toLocaleDateString(),
      status: 'pending',
      statusText: '待审核',
      feedback: ''
    }
    applications.value.unshift(newApplication)
    
    ElMessage.success('申请提交成功！')
    applyDialogVisible.value = false
    
    // 切换到申请进度标签页
    activeTab.value = 'applications'
  } catch (error) {
    ElMessage.error('申请提交失败，请重试')
  }
}

// 查看申请详情
const viewApplicationDetail = (application: any) => {
  ElMessage.info(`查看申请 ${application.topicTitle} 的详细信息`)
}

// 显示添加项目对话框
const showAddProjectDialog = () => {
  addProjectDialogVisible.value = true
  // 重置表单
  projectForm.title = ''
  projectForm.description = ''
  projectForm.enterprise = ''
  projectForm.mentor = ''
  projectForm.startDate = ''
}

// 添加项目
const addProject = async () => {
  try {
    // 这里应该调用API添加项目
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    const newProject = {
      id: myProjects.value.length + 1,
      title: projectForm.title,
      description: projectForm.description,
      enterprise: projectForm.enterprise,
      mentor: projectForm.mentor,
      startDate: projectForm.startDate,
      progress: 0,
      status: 'pending',
      statusText: '待开始'
    }
    
    myProjects.value.push(newProject)
    ElMessage.success('项目添加成功！')
    addProjectDialogVisible.value = false
  } catch (error) {
    ElMessage.error('项目添加失败，请重试')
  }
}

// 查看项目详情
const viewProjectDetail = (project: any) => {
  currentProject.value = project
  projectDetailDialogVisible.value = true
}

// 查看项目进度
const viewProjectProgress = (project: any) => {
  ElMessage.info(`查看项目 ${project.title} 的进度详情`)
}

// 查看学习资源
const viewResource = (resource: any) => {
  ElMessage.info(`查看学习资源 ${resource.title}`)
}

// 下载学习资源
const downloadResource = (resource: any) => {
  ElMessage.success(`开始下载 ${resource.title}`)
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
}

onMounted(() => {
  totalTopics.value = topics.value.length
})
</script>

<style scoped>
.student-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-header h1 {
  color: #045108;
  margin-bottom: 8px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

.student-tabs {
  margin-bottom: 24px;
}

.filter-section {
  margin-bottom: 24px;
}

.filter-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e8 100%);
}

.filter-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.topics-section {
  margin-bottom: 24px;
}

.topic-card {
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.topic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.topic-title {
  margin: 0;
  font-size: 18px;
  color: #045108;
  flex: 1;
  margin-right: 12px;
}

.topic-content {
  margin-bottom: 20px;
}

.topic-description {
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
}

.topic-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.topic-requirements {
  margin-bottom: 16px;
}

.topic-requirements h4 {
  margin: 0 0 8px 0;
  color: #045108;
  font-size: 14px;
}

.topic-requirements ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
  font-size: 14px;
}

.topic-requirements li {
  margin-bottom: 4px;
}

.topic-actions {
  display: flex;
  gap: 12px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.applications-section,
.projects-section,
.resources-section {
  margin-bottom: 24px;
}

.applications-card,
.projects-card,
.resources-card {
  background: white;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topic-detail h2 {
  color: #045108;
  margin-bottom: 16px;
}

.detail-description {
  color: #666;
  margin-bottom: 24px;
  line-height: 1.6;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h3 {
  color: #045108;
  margin-bottom: 12px;
  font-size: 16px;
}

.detail-section ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
}

.detail-section p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.project-card,
.resource-card {
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.project-card:hover,
.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.project-header,
.resource-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.project-title,
.resource-title {
  margin: 0;
  font-size: 18px;
  color: #045108;
  flex: 1;
  margin-right: 12px;
}

.project-content,
.resource-content {
  margin-bottom: 20px;
}

.project-description,
.resource-description {
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
}

.project-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.project-actions,
.resource-actions {
  display: flex;
  gap: 12px;
}

.resource-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.resource-author,
.resource-date {
  font-size: 12px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-row .el-input,
  .filter-row .el-select {
    width: 100% !important;
  }
  
  .topic-actions {
    flex-direction: column;
  }
  
  .topic-actions .el-button {
    width: 100%;
  }
  
  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .project-actions,
  .resource-actions {
    flex-direction: column;
  }
  
  .project-actions .el-button,
  .resource-actions .el-button {
    width: 100%;
  }
  
  .resource-meta {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}
</style>
